<template>
	<view>
		<!-- 搜索 -->
		<u-sticky>
			<view>
				<view class="header u-p-24">
					<u-search :show-action='false' v-model="params.name" @custom="getList()" @search="getList()">
					</u-search>
				</view>

			</view>
		</u-sticky>

		<view class="bg-white" style="position: static;">
			<u-dropdown title-size="24" ref="dropdown1" @close="dropClose">
				<u-dropdown-item :title="itemEnum" v-model="params.thirdClassifyId" :options="optionsEnum">
					<scroll-view scroll-y class="droScroll">
						<view @click="selectEnum(item)" class="item u-border-bottom" v-for="(item,index) in optionsEnum"
							:key="index">
							<view class="u-line-1">{{item.label}}</view>
							<u-icon v-if="params.thirdClassifyId==item.id" name="checkbox-mark" color="#2979ff"
								size="38"></u-icon>
						</view>
					</scroll-view>
				</u-dropdown-item>
				<u-dropdown-item v-model="params.sortByStock" :title="itemStock" :options="optionsStock"
					@change="getList()"></u-dropdown-item>
				<u-dropdown-item :title="minMaxItem">
					<view class="bg-white">
						<view class="priceBox u-flex  u-p-24">
							<u-input v-model="params.minSalePrice" type="number" class="u-flex-1" input-align="center">
							</u-input>
							<text>至</text>
							<u-input v-model="params.maxSalePrice" type="number" class="u-flex-1" input-align="center">
							</u-input>
						</view>
					</view>

				</u-dropdown-item>
				<u-dropdown-item @change="getList()" v-model="params.saleState" :title="saleStateItem"
					:options="saleState"></u-dropdown-item>
				<u-dropdown-item @change="getList()" v-model="params.businessVillageId" :title="villageIdItem"
					:options="businessVillageList"></u-dropdown-item>
			</u-dropdown>
		</view>

		<!-- 商品列表 -->
		<view>
			<view class="u-m-26 bg-white u-p-26 u-flex u-col-top itemsBox animate__animated animate__fadeIn "
				v-for="(item,index) in goodList" :key="index">
				<u-image border-radius="12" width="170" height="170" :src="item.mainImage"></u-image>

				<view class="u-m-l-22 u-flex-1 " style="overflow: hidden;">
					<view class=" u-flex">
						<view class="u-flex-1 u-line-2 u-m-r-32 u-font-lg fw-large">{{item.name}}</view>


					</view>
					<view class="u-m-t-10 u-m-b-9">
						<text class="u-font-xs color-red">￥</text>
						<text class="u-font-19 color-red">{{item.salePrice}}</text>
						<text class="u-font-xs line-del u-m-l-12">￥{{item.price}}</text>
					</view>
					<view class="u-color-gray-xs u-flex u-row-between ">
						<view class="u-font-xs">当前库存 <text>{{item.stock}}</text> 件</view>
						<view class="u-font-sm">{{item.villname}}</view>
					</view>
					<view>
						<!-- <u-button size="mini" type="primary" v-if="item.goodsType==1">普通</u-button>
						<u-button size="mini" type="primary" v-else-if="item.goodsType==2">套餐</u-button>
						<u-button size="mini" type="primary" v-else-if="item.goodsType==3">计时</u-button> -->
						<u-tag v-if="item.goodsType==1" size="mini" type="primary" text="普通"></u-tag>
						<u-tag v-if="item.goodsType==2" size="mini" type="warning" text="套餐"></u-tag>
						<u-tag v-if="item.goodsType==3" size="mini" type="info" text="计时"></u-tag>
					</view>
				</view>

				<!-- 		<u-button @click.stop="setGoodSate('up',item)" size="mini"
					v-if="item.saleState ==1 || item.saleState==3" class="" type="warning">上架</u-button> -->
				<!-- <u-button @click.stop="setGoodSate('down',item)" size="mini" v-if="item.saleState==2"
					class="u-m-l-6 " type="error">下架</u-button> -->
				<u-button size="mini" type="warning" @click="specClick(item)">修改</u-button>
			</view>
		</view>
		<view class="default" v-if="goodList.length===0">
			<u-empty class="" text="暂无数据"></u-empty>
		</view>
	</view>



	<tarBar />
</template>

<script setup lang="ts">
	import tarBar from '@/components/tarBar.vue'
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app'
	import orderApi from '@/api/order'
	import shopApi from '@/api/shop'

	import userSotre from '@/store/user';
	import {
		computed,
		reactive,
		ref
	} from "vue";
	const userPinia = userSotre()


	const specShow = ref < boolean > (false)
	const goodList = ref([])
	const dropdown1 = ref(null)
	const optionsEnum = ref([]) //商品分类
	const optionsStock = ref([{
			label: '库存升序',
			value: 1
		},

		{
			label: '库存降序',
			value: 2
		}
	]) //排序方式

	const saleState = ref([{
			label: '上架',
			value: 2
		},
		{
			label: '下架',
			value: 3
		},
		{
			label: '当日售罄',
			value: 4
		}
	])
	const businessVillageList = ref([])

	const params = reactive({
		pageNo: 1,
		pageSize: 20,
		businessVillageId: '',
		saleState: 2,
		sortByStock: 1,
		thirdClassifyId: '',
		name: '',
		minSalePrice: '',
		maxSalePrice: '',
	})


	function reset() {
		params.pageNo = 1
		params.pageSize = 20
		params.businessVillageId = ''
		params.saleState = 2
		params.sortByStock = 1
		params.thirdClassifyId = ""
		params.name = ''
		params.minSalePrice = ''
		params.maxSalePrice = ''
	}

	function specClick(item) {
		// uni.navigateTo({
		// 	url:'/subpackage/order/goods/managespec'
		// })
		uni.$u.route({
			url: '/subpackage/order/goods/managespec',
			params: {
				id: item.goodsId,
				type: item.variantState,

			}
		})
	}

	async function getEnumList() {
		return orderApi.listIdName().then(res => {
			res.data.unshift({
				name: '全部',
				id: ''
			})
			res.data.map(item => {
				item.label = item.name,
					item.value = item.id
			})
			optionsEnum.value = res.data
		})
	}

	function selectEnum(item) {
		params.thirdClassifyId = item.id
		getList()
		dropdown1.value.close()
	}

	function minMax() {

		dropdown1.value.close()
	}

	function dropClose(index) {
		if (index == 2) {
			getList()
		}
	}

	async function getList(e) { //查询商品列表
		if (!e) {
			goodList.value = []
			params.pageNo = 1
		}
		if (e == 'reset') {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '已刷新'
			})
		}
		return shopApi.goodsList(params).then(res => {
			if (goodList.value.length < res.data.total) {
				goodList.value = goodList.value.concat(res.data.list)
				params.pageNo++
			}
		})
	}

	async function getVillageList() {
		return shopApi.businessVillageList().then(res => {
			res.data.map((item, index) => {
				item.label = item.value
				item.value = item.id

				if (index == 0) {
					params.businessVillageId = item.id
				}

			})
			businessVillageList.value = res.data
		})
	}

	function setGoodSate(type, item) { //上&下架
		uni.showModal({
			title: '提示',
			content: '是否确认操作',
			success: (res) => {
				if (res.confirm) {
					let obj = {
						ids: [item.goodsId]
					}
					switch (type) {
						case 'up': //上架
							obj.state = 2
							break;
						default: //下架
							obj.state = 3
							break;
					}
					orderApi.batchUpdateSaleState(obj).then(result => {
						if (item.saleState == 3) {
							item.saleState = 2
						} else {
							item.saleState = 3
						}
					})
				}
			}

		})
	}


	onShow(() => {
		if (userPinia.isLoginType != 0) {
			getEnumList().then(res => {
				return getVillageList()
			}).then(res => {
				getList('add')
			})


		}
	})
	onLoad(() => {
		uni.$on('SETGOOD', (id, obj) => {
			console.log(id, obj);
			goodList.value.find((item, index) => {
				if (item.goodsId == id) {
					item.stock = obj.stock
					// item.state = obj.state
					if (item.state != obj.state) {
						goodList.value.splice(index, 1)
					}
				}
			})
		})
	})
	onReachBottom(() => {
		getList('add')
	})

	onPullDownRefresh(() => {
		if (userPinia.isLoginType != 0) {
			params.pageNo = 1
			goodList.value = []
			getEnumList()
			getVillageList()
			getList('reset')
		}

	})

	const itemEnum = computed(() => {
		return optionsEnum.value.find(item => item.value === params.thirdClassifyId)?.label
	})
	const itemStock = computed(() => {
		return optionsStock.value.find(item => item.value === params.sortByStock)?.label
	})
	const minMaxItem = computed(() => {
		if (params.maxSalePrice == "" && params.minSalePrice == "") {
			return '价格筛选'
		} else {
			return `${params.minSalePrice ? params.minSalePrice : '请输入'}-${params.maxSalePrice ? params.maxSalePrice : '请输入'}`
		}
	})
	const saleStateItem = computed(() => {
		return saleState.value.find(item => item.value === params.saleState)?.label
	})
	const villageIdItem = computed(() => {
		return businessVillageList.value.find(item => item.value === params.businessVillageId)?.label
	})
</script>

<style lang="scss" scoped>
	.default {
		height: 65vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {

		background-color: #ffc300;
	}

	.itemsBox {
		border-radius: 18upx;
		box-shadow: 0upx 6upx 16upx rgba(200, 200, 200, .1);
	}

	.droScroll {
		height: 65vh;
		background-color: white;

		.item {
			height: 85upx;
			display: flex;
			align-items: center;
			padding: 0 29upx;

			>view {
				flex: 1;
			}
		}
	}
</style>
